<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<script src="js/jquery.js"></script>
		<link rel="stylesheet" href="css/bootstrap.css">
		<script src="js/bootstrap.js"></script>
		<link rel="stylesheet" href="css/ol.css" type="text/css">
		<script src="js/ol-debug.js"></script>
		<title></title>
	</head>

	<body onload="init()">
		
		<div id="map" class="row-fluid col-lg-10">
		</div>
		<div id="info" class="container-fluid">
			<iframe src="" width="" height=""></iframe>
		</div>
		
		<script type="text/javascript">
			function init() {
				var wmsSource = new ol.source.ImageWMS({
					url: 'http://demo.opengeo.org/geoserver/wms',
					params: {
						'LAYERS': 'ne:ne'
					},
					serverType: 'geoserver'
				});
				var wmsLayer = new ol.layer.Image({
					source: wmsSource
				});
				var view = new ol.View({
					center: [0, 0],
					zoom: 1
				});
				var map = new ol.Map({
					layers: [wmsLayer],
					target: 'map',
					view: view
				});
				map.on('singleclick', function(evt) {
					document.getElementById('info').innerHTML = 'aa';
					var viewResolution = view.getResolution();
					var url = wmsSource.getGetFeatureInfoUrl(
						evt.coordinate, viewResolution, 'EPSG:3857', {
							'INFO_FORMAT': 'text/html'
						}
					);
					console.log(url);
					if (url) {
						document.getElementById('info').innerHTML =
							'<iframe width=100%  seamless src="' + url + '"></iframe>';
					}
				})
			}
		</script>
	</body>

</html>